export default {
    name: "TheMenu",
    methods: {
        renderFinalMenu(menu) {
            return <el-menu-item index={menu.path}>{menu.title}</el-menu-item>;
        },
        renderSubMenu(menu) {
            if (!menu.children) return this.renderFinalMenu(menu);
            return (
                <el-sub-menu
                    key={menu.path}
                    index={menu.path}
                    v-slots={{ title: () => menu.title }}
                >
                    {menu.children.map((subMenu) => {
                        if (subMenu.children) {
                            return this.renderSubMenu(subMenu);
                        }
                        return this.renderFinalMenu(subMenu);
                    })}
                </el-sub-menu>
            );
        },
    },
    render() {
        const { menus } = this.$attrs;
        return (
            <el-menu mode="horizontal" router>
                {menus.map((menu) => {
                    return this.renderSubMenu(menu);
                })}
            </el-menu>
        );
    },
};
